<template>
	<div class="table-content">
		<div class="table-content-search">
			<div class="tablDataDaily-label"></div>
			<div>金额统计单位：万</div>
		</div>
		<!-- <el-table
			key="father"
			element-loading-spinner="el-icon-loading"
			border
			ref="elTable"
			size="mini"
			class="small-size-table"
			:data="tableData"
			style="width: 100%"
			show-summary
			:max-height="480"
			highlight-current-row
			:summary-method="(val) => tableDataComparison(val, totalSummary)"
			:header-cell-style="getRowClass"
		>
			<el-table-column prop="staticsDate" align="center" label="日期">
				<template slot-scope="scope">
					{{
						scope.row.staticsDate ||
							getFormateDate(scope.row.staticsDate, 'ym')
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="effecactiveMemberNum"
				align="center"
				label="新增有效会员"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ scope.row.effecactiveMemberNum || '-' }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="activeMemberNum"
				align="center"
				label="活跃会员"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ scope.row.activeMemberNum || '-' }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				label="有效投注"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.validBetAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="platformNetAmount"
				align="center"
				label="平台输赢"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber(
								'10k',
								scope.row.platformNetAmount
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="platformIncomeAmount"
				align="center"
				label="平台收入"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p
						:style="
							handleNumberColor(scope.row.platformIncomeAmount)
						"
					>
						{{
							handleTotalNumber(
								'10k',
								scope.row.platformIncomeAmount,
								0,
								true,
								true
							)
						}}
					</p>
				</template>
			</el-table-column>
		</el-table> -->
		<div style="display: flex;width: 100%;">
			<div class="table-content">
				<div class="table-content-chart" id="main"></div>
			</div>
			<div class="table-content">
				<div class="table-content-chart" id="main1"></div>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
export default {
	mixins: [list, summaryList],
	props: {
		merchantId: {
			type: String,
			default: null
		},
		dateValue: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			tableData: '',
			totalSummary: '',
			staticsDateList: [],
			effecactiveMemberNumList: [],
			activeMemberNumList: [],
			validBetAmountList: [],
			platformNetAmountList: [],
			platformIncomeAmountList: []
		}
	},
	mounted() {},
	methods: {
		loadData() {
			const currentDate = new Date(this.dateValue)
			const eightDaysAgo = new Date(currentDate)
			eightDaysAgo.setDate(currentDate.getDate() - 7)
			const params = {
				...this.queryData,
				startTime: dayjs(eightDaysAgo)
					.startOf('day')
					.format('YYYY-MM-DD'),
				endTime: dayjs(this.dateValue)
					.endOf('day')
					.format('YYYY-MM-DD'),
				merchantId: this.merchantId
			}
			this.tableData = []
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getDataComparisonReportPage(params)
				.then((res) => {
					this.loading = false
					this.axiosDate = +new Date()
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.totalSummary = res?.data?.summary || {}
					this.subSummary = res?.data?.summary || {}
					this.staticsDateList = []
					this.effecactiveMemberNumList = []
					this.activeMemberNumList = []
					this.validBetAmountList = []
					this.platformNetAmountList = []
					this.platformIncomeAmountList = []
					for (const index in this.tableData) {
						const e = this.tableData[index]
						this.staticsDateList.push(e.staticsDate)
						this.effecactiveMemberNumList.push(
							e.effecactiveMemberNum
						)
						this.activeMemberNumList.push(e.activeMemberNum)
						this.validBetAmountList.push(e.validBetAmount)
						this.platformNetAmountList.push(e.platformNetAmount)
						this.platformIncomeAmountList.push(
							e.platformIncomeAmount
						)
					}
					this.initChart()
					this.initChart1()
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getDataComparisonReportTotal(params)
				.then((res) => {
					this.loading = false
					this.totalSummary = res?.data || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		initChart() {
			// 获取图表容器
			var chartDom = document.getElementById('main')
			// 初始化图表
			var myChart = echarts.init(chartDom)

			// 配置项
			var option = {
				xAxis: {
					type: 'category',
					data: this.staticsDateList
				},
				title: {
					text: '日活跃',
					left: 'center'
				},
				yAxis: {
					type: 'value'
				},
				legend: {
					data: ['新增有效用户(个)', '活跃用户(个)'], // 数据系列的文本描述
					bottom: 0 // 设置 legend 在底部
				},
				series: [
					{
						name: '新增有效用户(个)',
						data: this.effecactiveMemberNumList, // todayActive.value
						type: 'bar',
						itemStyle: {
							color: '#81d3f8'
						}
					},
					{
						name: '活跃用户(个)',
						data: this.activeMemberNumList, // todayActive.value
						type: 'bar',
						itemStyle: {
							color: '#f59a23'
						}
					}
				]
			}

			// 设置图表配置项
			option && myChart.setOption(option)
		},
		initChart1() {
			// 获取图表容器
			var chartDom = document.getElementById('main1')
			// 初始化图表
			var myChart = echarts.init(chartDom)

			// 配置项
			var option = {
				title: {
					text: '平台盈亏',
					left: 'center'
				},
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					left: '3%',
					right: '8%',
					bottom: '8%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.staticsDateList
					// platformWinOrLoss.value
				},
				yAxis: {
					type: 'value'
				},
				legend: {
					data: ['总有效投注额', '平台输赢', '平台收入'], // 数据系列的文本描述
					bottom: 0 // 设置 legend 在底部
				},
				series: [
					{
						name: '总有效投注额',
						type: 'line',
						data: this.validBetAmountList.map((item) =>
							this.currencyTo10k(item)
						), // platformWinOrLoss.value
						itemStyle: {
							color: '#1890ff'
						}
					},
					{
						name: '平台输赢',
						type: 'line',
						data: this.platformNetAmountList.map((item) =>
							this.currencyTo10k(item)
						), // platformWinOrLoss.value
						itemStyle: {
							color: '#2fc25b'
						}
					},
					{
						name: '平台收入',
						type: 'line',
						data: this.platformIncomeAmountList.map((item) =>
							this.currencyTo10k(item)
						), // platformWinOrLoss.value
						itemStyle: {
							color: '#facc14'
						}
					}
				]
			}
			// 设置图表配置项
			option && myChart.setOption(option)
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.table-content {
	margin-top: 20px;
	width: 100%;
	margin-left: 2px;
	box-sizing: border-box;
	.label {
		font-size: 26px;
		font-weight: bold;
		padding-left: 10px;
		margin-bottom: 20px;
	}
	.table-content-chart {
		height: 400px;
		border: 1px solid #ebeef5;
		padding-top: 15px;
	}
	.table-content-search {
		width: auto;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 10px;
		font-size: 13px;
		.tablDataDaily-label {
			float: left;
			font-size: 26px;
			font-weight: bold;
			padding-left: 10px;
			margin-top: 12px;
		}

		.search-slot {
			float: left;
			margin-bottom: 10px;
		}
	}
}
</style>
